<template>
  <div class="con fl" :style="{ height: type == 'SPU' ? '330px' : '360px' }">
    <div class="img">
      <a-checkbox v-model="itemData.isSel" class="checkbox" />
      <a-image fit="contain" width="210px" height="210px" :src="src">
        <template #error>
          <img style="width: 100%; height: 100%" src="https://cdn2.selleroa.com/saas/product/118310735721069569.png" alt="" />
        </template>
      </a-image>
      <div class="setting-con" @click.stop="operate('detail')">
        <div class="btn-con">
          <div class="img-con" @click.stop="operate('edit')" v-if="$authPass('product.spu.createOrUpdate') && type == 'SPU'">
            <a-popover position="right">
              <icon-pen />
              <template #content> 编辑SPU </template>
            </a-popover>
          </div>
          <div class="img-con" @click.stop="operate('edit')" v-if="$authPass('product.sku.saveOrUpdate') && type != 'SPU'">
            <a-popover position="right">
              <icon-pen />
              <template #content> 编辑SKU </template>
            </a-popover>
          </div>
          <div class="img-con" @click.stop="operate('showImg')">
            <a-popover position="right">
              <icon-zoom-in />
              <template #content> 查看大图 </template>
            </a-popover>
          </div>
          <div class="img-con" @click.stop="operate('del')" v-if="type == 'SPU' && $authPass('product.spu.del')">
            <a-popover position="right">
              <icon-delete />
              <template #content> 删除 </template>
            </a-popover>
          </div>
          <div class="img-con" @click.stop="operate('log')">
            <a-popover position="right">
              <icon-bookmark />
              <template #content> 操作日志 </template>
            </a-popover>
          </div>
          <!-- <span @click="operate('detail')">查看详情</span>
          <span @click="operate('edit')">编辑</span>
          <span @click="operate('del')" v-if="type == 'SPU'">删除</span>
          <span @click="operate('showImg')">查看图片</span>
          <span @click="operate('log')">日志</span> -->
        </div>
      </div>
    </div>
    <div class="title">
      <TextLimit style="margin-top: 6px" position="top" :rows="1">{{ type == 'SPU' ? itemData.spuName : itemData.skuName }}</TextLimit>
    </div>
    <div class="flag">
      <div class="text">
        <TextLimit style="margin-top: 6px" position="top" :rows="1">{{ type == 'SPU' ? itemData.spu : itemData.sku }}</TextLimit>
      </div>
      <div class="tag">
        <!-- <div v-if="type == 'SKU'">
          <span class="group" v-if="itemData.productType == 'group'">组合</span>
          <span class="is-stop" v-if="itemData.status != 1">停用</span>
        </div> -->

        <div>
          <a-space>
            <div class="category-name" v-if="itemData.category && itemData.category.name">
              <TextLimit style="width: 40px; text-align: center" position="top" :rows="1">{{ itemData.category.name }}</TextLimit>
            </div>
            <div class="list-num" v-if="type == 'SPU' && itemData.productSkuList.length > 0">变体:{{ itemData.productSkuList.length }}</div>
          </a-space>
        </div>
      </div>
    </div>
    <div v-if="type != 'SPU'" class="highlight" style="font-size: 12px; width: 200px">
      <a-space>
        <div style="font-size: 14px">spu：</div>
        <div style="width: 140px">
          <TextLimit :rows="1" position="top" class="highlight">{{ itemData.spu ? itemData.spu : '--' }}</TextLimit>
        </div>
      </a-space>
    </div>
    <div class="footer">
      <div class="hd">
        <div>
          <a-popover>
            <span class="name color" v-if="itemData.developer && itemData.developer.id">{{ itemData.developer ? itemData.developer.name.slice(0, 1) : '' }}</span>
            <template #content>
              <span>主开发：{{ itemData.developer.name }}</span>
            </template>
          </a-popover>

          <span class="name color1" v-for="item of itemData.salerList">
            <a-popover>
              <span>{{ getNameFirst(item) }}</span>
              <template #content>
                <span>销售员：{{ item.name }}</span>
              </template>
            </a-popover>
          </span>
        </div>
        <div class="sku-status">
          <span class="active" v-if="itemData.status == 'ACTIVE'">可售</span>
          <span class="not-active" v-if="itemData.status == 'NOT_ACTIVE'">停售</span>
          <span class="discontinued" v-if="itemData.status == 'DISCONTINUED'">停产</span>
          <span class="outsourced" v-if="itemData.status == 'OUTSOURCED'">委托加工</span>
        </div>
      </div>
      <div class="bd" style="color: #999999">
        <icon-clock-circle />
        <span>{{ dayjs(itemData.gmtCreate).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue'
  import dayjs from 'dayjs'
  export default defineComponent({
    name: 'Item',
    props: ['item', 'type'],
    setup(props, { emit }) {
      let itemData: any = computed({
        set(val) {
          emit('update:item', val)
        },
        get() {
          return props.item
        },
      })

      let src = computed(() => {
        let str = ''
        if (props.type == 'SPU') {
          str = props.item.productPicList && props.item.productPicList[0] ? props.item.productPicList[0]?.url : ''
        } else {
          str = props.item.productPicList && props.item.productPicList[0] ? props.item.productPicList[0].url : ''
        }
        let newStr = ''
        if (str.indexOf('cdn.shopify.com')) {
          newStr = `https://erpapi.selleroa.com/v1/aliyun/oss/getAmazonImage?url=${str}`
        } else {
          newStr = str
        }
        return newStr
      })

      const operate = (type: string) => {
        emit('opreate', type)
      }

      const getNameFirst = (data: any) => {
        let name = data?.name || ''
        return name.slice(0, 1) || ''
      }

      return {
        itemData,
        dayjs,
        operate,
        src,
        getNameFirst,
      }
    },
  })
</script>

<style lang="less" scoped>
  .checkbox {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 2;
  }

  .con {
    width: 210px;
    height: 330px;
    background-color: #fff;
    box-shadow: 0 0 4px 1px #eee;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;

    .img {
      width: 210px;
      // height: 210px;
      position: relative;
      transition: transform 0.2s linear;
      &:hover .setting-con {
        z-index: 1;
        display: block;
      }
      // &:hover .arco-image-img {
      //   transform: scale(1.1);
      // }
      .setting-con {
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        display: none;
        // background: rgba(105, 105, 105, 0.8);
        .btn-con {
          // border: 1px solid white;
          width: 30px;
          // height: 80px;
          position: absolute;
          top: 5px;
          right: 10px;

          .img-con {
            background: rgba(105, 105, 105, 0.8);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
            margin-bottom: 10px;
            color: white;
            font-size: 18px;
          }

          // transform: translate(-50%, -50%);
          // span {
          //   font-size: 12px;
          //   display: inline-block;
          //   text-align: center;
          //   height: 30px;
          //   width: 60px;
          //   line-height: 30px;
          //   color: white;
          //   border: 1px solid white;
          //   border-radius: 5px;
          //   margin-bottom: 10px;
          //   user-select: none;
          //   &:nth-child(2n-1) {
          //     margin-right: 30px;
          //   }
          // }
        }
      }
    }

    .title {
      height: 36px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px;
      color: #515a6e;
      font-weight: 400;
      padding: 0 3px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .flag {
      height: 30px;
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
      box-sizing: border-box;
      .text {
        width: 128px;
        overflow: hidden;
        color: #999999;
        font-size: 12px;
        line-height: 30px;
        cursor: pointer;
      }
      .tag {
        font-size: 12px;
        // padding: 0 5px;
        // box-sizing: border-box;
        span {
          margin-top: 4px;
          display: inline-block;
          padding: 2px 4px;
          box-sizing: border-box;
          border-radius: 3px;
        }

        .category-name,
        .list-num {
          margin-top: 4px;
          display: inline-block;
          padding: 2px 4px;
          box-sizing: border-box;
          border-radius: 3px;
          text-align: center;
        }
        .category-name {
          max-width: 35px;
          background-color: #d8f0ea;
          color: #059794;
        }

        .is-stop {
          background-color: #ececec;
          color: #686868;
          margin-right: 5px;
        }

        .group {
          background-color: #f0e3d8;
          color: #f9939b;
          margin-right: 5px;
        }

        .list-num {
          width: 65px;
          // text-align: center;
          background-color: #efebfe;
          color: #6c648b;
          padding: 2px 3px;
        }
      }
    }

    .footer {
      border-top: 1px solid #dadde2;

      .sku-status {
        line-height: 30px;
        span {
          display: inline-block;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          padding: 0 5px;
        }

        .active {
          background: #eaf6ee;
          color: #017346;
        }
        .not-active {
          background: #fff6d0;
          color: #e69d00;
        }
        .discontinued {
          background: #f2f2f2;
          color: #888888;
        }
        .outsourced {
          background: #eaf6ee;
          color: #017346;
        }
      }

      .hd {
        display: flex;
        min-height: 30px;
        justify-content: space-between;
        padding: 0 5px;
        box-sizing: border-box;
        .color {
          background-color: #65b328;
        }
        .color1 {
          background-color: #ecc438;
        }
        .name {
          display: inline-block;
          float: left;
          margin: 5px 5px 5px 0;
          color: white;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 12px;
          border-radius: 50%;
        }
      }
      .bd {
        font-size: 12px;
        padding: 0 0 5px 5px;
        box-sizing: border-box;
      }
    }
  }
</style>
